import React from 'react';
import { Card, Tag, Typography } from 'antd';
import { ClockCircleOutlined, TagsOutlined } from '@ant-design/icons';
// import format from 'date-fns/format'
// import * as moment from 'moment';
import { RecordType } from "../../types"

const {Title, Text} = Typography;

const RecordCard: React.FC<{ record: RecordType }> = (props) => {
  const {title, content, tags, updated_at} = props.record;
  return (
    <Card hoverable>
      {/* 标题 */}
      <Title level={4}>{title}</Title>

      {/* 内容，超过固定行数显示省略号 */}
      <Text>{content}</Text>

      {/* 标签 */}

      <div style={{marginTop: '8px'}}>
        <TagsOutlined/>{' '}
        {tags.map(tag => (
          <Tag key={tag}>{tag}</Tag>
        ))}
      </div>


      {/* 最近的更新时间 */}
      <div style={{marginTop: '8px', display: 'flex', alignItems: 'center'}}>
        <ClockCircleOutlined style={{marginRight: '4px'}}/>
        <Text type="secondary">最近更新：{updated_at}</Text>
      </div>
    </Card>
  );
};

export default RecordCard;
